<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /> 
  <meta name="renderer" content="webkit" />
   <link href="css/default.css"  rel="stylesheet">
   <link href="css/common.css"  rel="stylesheet">
</head>
<style>


.all_mes{overflow:hidden;width:90%;margin:0 auto 30px auto;}
.mes{overflow:hidden;position:relative;}
.mes img{width:100%;height:80px;}
.mes .img_main{position:absolute;top:40px;left:5px;font-size: 30px;}
.mes .title{float:left;width:90%;margin-top:10px;padding-left:1%;}
.mes .rid{float:right;width:38px;height: 38px;border-radius: 50%;  background:green;cursor:pointer;margin-right:1%;}
.mes .red{background:red;}
</style>
<body>
<div class="top_address">
	<div class="left">当前位置：情景节能</div>
</div>

<div class="all_mes">
	<div class="mes">
		<img src="images/timg.jpg"/>
		<div class="img_main">回家</div>
		<div class="title">回家模式:回家模式回家模式回家模式回家模式回家模式回家模式回家模式回家模式回家模式</div>
		<div class="rid"></div>
	</div>
	
		<div class="mes">
		<img src="images/timg.jpg"/>
		<div class="img_main">回家</div>
		<div class="title">回家模式:回家模式回家模式回家模式回家模式回家模式回家模式回家模式回家模式回家模式</div>
		<div class="rid"></div>
	</div>
	
		<div class="mes">
		<img src="images/timg.jpg"/>
		<div class="img_main">回家</div>
		<div class="title">回家模式:回家模式回家模式回家模式回家模式回家模式回家模式回家模式回家模式回家模式</div>
		<div class="rid"></div>
	</div>
	
		<div class="mes">
		<img src="images/timg.jpg"/>
		<div class="img_main">回家</div>
		<div class="title">回家模式:回家模式回家模式回家模式回家模式回家模式回家模式回家模式回家模式回家模式</div>
		<div class="rid"></div>
	</div>
	
		<div class="mes">
		<img src="images/timg.jpg"/>
		<div class="img_main">回家</div>
		<div class="title">回家模式:回家模式回家模式回家模式回家模式回家模式回家模式回家模式回家模式回家模式</div>
		<div class="rid"></div>
	</div>
</div>

  <script src="js/jq.js" ></script>
  <script>
  $(function(){
	$('.rid').click(function(){
		$(this).hasClass('red') == true ? $(this).removeClass('red') : $(this).addClass('red');
	})
  })
  </script>
  </body>
</html>